<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>角色管理</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/libs/layui2.2.5/css/layui.css">
    <link rel="icon" href="href="${pageContext.request.contextPath}/static/libs/uiframe/frame/static/image/code.png">
    <style type="text/css">
        .layui-table-cell .layui-form-checkbox[lay-skin=primary] {
            top: 6px;
            vertical-align: middle;
        }
    </style>
</head>
<body class="body">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>角色列表</legend>
</fieldset>
<div style="margin-left: 10px;">
<button class="layui-btn layui-btn-xs layui-btn-normal" id="add_btn"><i class="layui-icon"></i>新增</button>
<button class="layui-btn layui-btn-xs layui-btn-normal" id="edit_btn"><i class="layui-icon"></i>编辑</button>
<button class="layui-btn layui-btn-xs layui-btn-danger" id="remove_btn"><i class="layui-icon"></i>删除</button>
</div>
<script type="text/html" id="rolebar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="user_edit">编辑</a>
    <a class="layui-btn layui-btn-xs" lay-event="menu_correlate">菜单设置</a>
</script>
<table id="rolelist" lay-filter = "rolelist"></table>
<script type="text/html" id="availableTpl">
    {{#  if(d.available === 'false'){ }}
    否
    {{#  } else { }}
    是
    {{#  } }}
</script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/libs/layui2.2.5/layui.js"></script>
<script type="text/javascript">
    var layIndex = null,tableIns;
    /**
     * 关闭弹窗，同时刷新数据列表
     * @param layIndex
     */
    function closeAllLayer() {
        layui.use(['table','layer'], function(){
            var $ = layui.jquery, layer = layui.layer;
            layer.closeAll();
            $.ajax({
                type:'get',
                url:'${pageContext.request.contextPath}/sys/user/rolelist',
                dataType: "json",
                contentType:'application/json;charset=utf-8',
                success:function(data) {
                    tableIns.reload({data:data});
                    layIndex = null;
                },
                error: function (error){
                    console.log(error);
                    layIndex = null;
                }
            });
        });
    }

    /**
     * 列表初始化
     */
    layui.use(['table','layer'], function(){
        var table = layui.table, layer = layui.layer, $ = layui.jquery;
        $.ajax({
            type:'get',
            url:'${pageContext.request.contextPath}/sys/user/rolelist',
            dataType: "json",
            contentType:'application/json;charset=utf-8',
            success:function(data) {
                tableIns = table.render({
                    id: 'rolelist',
                    elem: '#rolelist'
                    ,data: data
                    ,height: 'full-120'
                    ,cols: [[
                        {checkbox: true, LAY_CHECKED: false} //默认全选
                        ,{field: 'roleName', title: '角色名称'}
                        ,{field: 'aliasName', title: '角色别名'}
                        ,{field: 'description', title: '角色描述'}
                        ,{field: 'available', title: '是否锁定', templet: '#availableTpl'}
                        ,{field: 'sortedNum', title: '排序编号'}
                        ,{field: 'createdTime', title: '创建时间'}
                        ,{fixed: 'right', align:'center',title: '操作', toolbar: '#rolebar'}
                    ]]
                    ,even: true
                    ,page: true //是否显示分页
                    ,limits: [5, 10, 15]
                    ,limit: 5 //每页默认显示的数量
                });

                table.on('tool(rolelist)', function(obj){
                    var data = obj.data //获得当前行数据
                        ,layEvent = obj.event; //获得 lay-event 对应的值
                    if(layEvent === 'role_edit'){

                    }else if(layEvent === 'menu_correlate'){
                        if(layIndex != null) return;
                        layIndex = layer.open({
                            type: 2,
                            title:'菜单设置',
                            area: ['1000px', '650px'],
                            shade: 0,
                            shadeClose:false,
                            resize:true,
                            content: '${pageContext.request.contextPath}/sys/role/correlatemenupage?roleid=' + data['roleId'],
                            cancel: function(index, layero){
                                layIndex = null;
                                layer.close(index);
                            }
                        });
                    }
                })
            },
            error: function (error){
                console.log(error);
            }
        });
        /**
         * 新建按钮绑定事件
         */
        $("#add_btn").click(function () {
            if(layIndex != null) return;
            layIndex = layer.open({
                type: 2,
                title:'角色添加',
                area: ['450px', '400px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/roleadd', 'no'],
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });
        /**
         * 编辑按钮绑定事件
         */
        $("#edit_btn").click(function () {
            if(layIndex != null) return;
            var checkStatus = table.checkStatus('rolelist'),roleid;
            if(checkStatus.data.length != 1){
                layer.msg('一次编辑只能选择一行', {icon: 5,anim: 6});
                return;
            }
            roleid = checkStatus.data[0]['id'];
            layIndex = layer.open({
                type: 2,
                title:'角色编辑',
                area: ['450px', '300px'],
                shade: 0,
                shadeClose:false,
                resize:true,
                content: ['${pageContext.request.contextPath}/sys/user/roleedit?roleid='+roleid, 'no'],
                cancel: function(index, layero){
                    layIndex = null;
                    layer.close(index);
                }
            });
        });

        /**
         * 删除按钮绑定事件
         */
        $("#remove_btn").click(function () {
            var checkStatus = table.checkStatus('rolelist'),roleids=[];
            if(checkStatus.data.length == 0){
                layer.msg('至少选择一行', {icon: 5,anim: 6});
                return;
            }
            for(var i = 0,len = checkStatus.data.length;i < len;i++){
                roleids.push(checkStatus.data[i]['id']);
            }

            $.ajax({
                type:'post',
                dataType:'json',
                url:'${pageContext.request.contextPath}/sys/user/roleremove',
                contentType : "text/html;charset=UTF-8",
                data:roleids.join(","),
                success:function (data) {
                    layer.msg(data.status);
                    closeAllLayer();
                },
                error:function (error) {
                    console.log(error);
                }
            });
        });
    });
</script>
</body>
</html>
